<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/public.css"/>
    <link rel="stylesheet" href="./css/explore.css"/>
    <link rel="stylesheet" href="./css/userSpace.css"/>
    <link rel="stylesheet" href="./css/login.css"/>
    <link rel="stylesheet" href="./css/musicPlaylist.css"/>
    <link rel="stylesheet" href="./css/musicPlayer.css"/>
    <link rel="stylesheet" href="./css/search.css"/>
    <link rel="icon" href="assets/favicon/toby.ico"/>
    <script src="./assets/font/iconfont.js"></script>
    <script>
      window.utils = {};
      window.onload = () => {
          let historyListener = (e) => {
              window.addEventListener("hashchange", (listener) => {
                  let anchorPoints = location.hash
                  utils.navigateTo(anchorPoints)
              })
          }
          historyListener();
          let anchorPoints = location.hash
          if (anchorPoints == "" || anchorPoints == "#") {
              utils.navigateTo("#explore")
          } else {
              utils.navigateTo(anchorPoints)
          }
      }
    </script>
</head>
<body class="iconfont">
    <!--顶部信息栏-->
   <div class="topNav">
       <span id="topNavLeftMenu">&#xf1a7;</span>
       <a id="search" href="#search">
           <span id="searchIcon">&#xe611;</span>
           <p id="searchComment">ColdPlay</p>
       </a>
       <span id="messageBox">&#xf18c;</span>
   </div>
    <!--主页面-->
    <div class="mainOuter">
        <!--探索-->
        <div class="explore">

            <!--轮播图-->
            <div id="wrap">
                <div id="carousel-wrapper" autoreplay infinity>
                    <!--轮播图-->
                </div>
                <ul id="indexCircle"></ul>
            </div>

            <!--顶部导航栏-->
            <ul class="navigateColumn">
                <li id="dailyRecommend">
                    <!--根据日期动态插入当天日期的图标-->
                </li>
                <li id="personalFM">
                    <a href="#personalFM">
                        <i>&#xe69d;</i>
                        <p>私人FM</p>
                    </a>
                </li>
                <li id="songMenu">
                    <a href="#songMenu">
                        <i>&#xe620;</i>
                        <p>歌单</p>
                    </a>
                </li>
                <li id="rank">
                    <a href="#rank">
                        <i>&#xe8c5;</i>
                        <p>排行榜</p>
                    </a>
                </li>
                <li id="albums">
                    <a href="#albums">
                        <i>&#xe622;</i>
                        <p>专辑</p>
                    </a>
                </li>
            </ul>

            <!--推荐歌单-->
            <div class="recommendAlbums">
                <div class="recommendAlbumsTitle">
                    <p>推荐歌单</p>
                    <div class="morePlayList">更多<i>&#xe626;</i></div>
                </div>
                <ul class="recommendAlbumsContent">
                    <!--歌单列表-->
                </ul>
            </div>

            <!-- 推荐MV -->
            <div class="recommendMV">
                <p class="recommendMVTitle">精选音乐视频</p>
                <ul id="recommendMVContent"></ul>
            </div>


<!--            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=500 height=150 src="//music.163.com/outchain/player?type=2&id=1878812258&auto=1&height=66"></iframe>-->
<!--            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=500 height=150 src="//music.163.com/outchain/player?type=2&id=1496089152&auto=1&height=66"></iframe>-->
        </div>

        <!--用户页面-->
        <div class="userSpace" style="display: none">
            <div class="userProfileCard">
                <a href="#login">
                    <img id="avatar" src="assets/img/userSpace/non-login.jpg" alt="">
                    <div id="userInfo">立即登录></div>
                </a>
            </div>
            <ul class="userTabCard">
                <li>
                    <i>&#xe754;</i>
                    <p>最近播放</p>
                </li>
                <li>
                    <i>&#xe6b3;</i>
                    <p>云盘</p>
                </li>
                <li>
                    <i>&#xe629;</i>
                    <p>我的好友</p>
                </li>
                <li>
                    <i>&#xe623;</i>
                    <p>收藏和赞</p>
                </li>
            </ul>
            <div class="favoriteMusicCard">
                <div class="favoriteMusicCover">
                    <img src="./assets/img/userSpace/frontCover.png" alt="">
                </div>
                <p id="userFavoriteMusicDescription">我喜欢的音乐</p>
                <div class="heartBeatModeButton">
                    <img src="./assets/img/userSpace/icon_heartbeat.png" alt="">
                    <span>心动模式</span>
                </div>
            </div>
            <div class="userAlbum">
                <div class="createdAlbum">
                </div>
                <div class="collectedAlbum">
                </div>
            </div>
        </div>

        <!--博客TODO-->

        <!--关注TODO-->

        <!--社区TODO-->
    </div>

    <!--其他页面-->

    <!--登录页-->
    <div class="login" style="display: none">
        <div class="loginBack">
            <span>立即体验</span>
            <i>&#xe626;</i>
        </div>
        <div class="loginLogo">
            <i>&#xe7b6;</i>
        </div>
        <div class="userInputArea">
            <div class="userAccount">
                <input
                        type="text"
                        placeholder="邮箱/手机号"
                        id="account"
                        onfocus="this.placeholder=''"
                        onblur="this.placeholder='邮箱/手机号'"
                >
            </div>
            <div class="userPassword">
                <input
                        type="password"
                        placeholder="密码"
                        id="password"
                        onfocus="this.placeholder=''"
                        onblur="this.placeholder='密码'"
                >
            </div>
        </div>
        <div id="loginButton">登录</div>
    </div>

    <!--歌单页面-->
    <div class="musicPlaylist" style="display: none">
        <!--歌单头部部分-->
        <div class="musicPlaylistBack">
            <i>&#xe697;</i>
            <span>歌单</span>
        </div>
        <div class="musicPlaylistTop">
<!--            <img id="musicPlaylistBackground" src="./assets/img/musicPlaylist/musicPlaylistBackground.jpg" alt="">-->
            <div id="musicPlaylistBackground"></div>
            <div class="musicPlayListInfo">
                <img id="musicPlaylistPic" src="https://p1.music.126.net/lvU-C_EJY_3M0zmdIbLeJw==/109951165449548900.jpg?param=150y150" alt="">
                <div class="albumMetadata">
                    <P id="albumTitle">这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心这使你充满了决心</P>
                    <p id="albumCreator">
                        <img src="./assets/img/musicPlaylist/toby.jpg" alt="">
                        Mo
                    </p>
                    <p id="albumIntroduction">
                        轻柔浪漫还有点复古，适合巴黎这样的老牌欧洲城市旅游旅拍的音乐。非千篇一律，这张歌单适合你慢下来，走一走巴黎的街道。其实遇上一个合适的周末，不一定需要去到巴黎，在家Breakfast in bed ，或者在阳台上与相爱的人吃顿 Brunch 的时候听这个歌单也不错。
                    </p>
                </div>
            </div>
        </div>
        <!--歌单列表部分-->
        <div class="musicPlayListMainList">
            <p id="musicPlaylistSongTitle">
                <i>&#xe624;</i>播放全部
            </p>
            <ul id="musicPlaylistSongsList">
                <!--歌单列表信息-->
            </ul>
        </div>
    </div>

    <!--搜索页-->
    <div class="search" style="display: none">
        <div class="searchTopper">
            <i id="searchBack">&#xe660;</i>
            <input type="text" id="searchFrame" placeholder="华北浪漫革命" />
        </div>
        <div class="searchRecommend">
<!--            <div class="searchHistory">-->
<!--                <p>历史</p>-->
<!--                <ul id="historyList">-->
<!--                </ul>-->
<!--            </div>-->
            <ul class="searchRecommendList"></ul>
        </div>
    </div>

    <!--搜索结果页-->
    <div class="searchResult" style="display: none">
        <div class="searchResultTopper">
            <i id="searchResultBack">&#xe660;</i>
            <input type="text" id="searchResultFrame" placeholder="五千首纯音乐"/>
        </div>
        <div class="musicPlayListMainList">
            <ul id="resultSongList">
                <div class="musicPlayListLoading">
                    <img src="./assets/img/loading.gif" />
                    <p>正在加载...</p>
                </div>
            </ul>
        </div>
    </div>

    <!--播放器页面-->
    <div class="musicPlayer">
        <div class="musicPlayerBackgroundImg"></div>
        <div class="musicPlayerTop">
            <p class="musicPlayerBackButton">&#xe660;</p>
            <div class="musicPlayerSongInfo"></div>
            <p class="musicPlayerShareButton">&#xe739;</p>
        </div>
        <div class="playerMain">
            <img id="needle" src="./assets/img/musicPlayer/needle.png" alt=""/>
            <div class="recordPlayer">
                <div class="recordSwitchOuter">
                    <img id="disc" src="./assets/img/musicPlayer/disc.png" alt=""/>
                    <img id="songCover" src="./assets/img/musicPlayer/songCover.png" alt=""/>
                </div>
                <!--旋转唱片特效-->
            </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       .
            <ul id="lyrics" style="display: none">
                <!--歌词-->
                <li>
                    <span>正在加载</span>
                </li>
            </ul>
        </div>

        <div class="musicPlayerBottom">
            <div class="likeColumn">
                <i id="like">&#xe7df;</i>
                <i id="download">&#xe856;</i>
                <i id="comments">&#xe6b4;</i>
                <i id="more">&#xe62d;</i>
            </div>
            <div class="processBar">
                <p id="processBarStart">00:00</p>
                <div class="process">
                    <i id="processBarPosition"></i>
                    <div id="afterProcess"></div>
                </div>
                <p id="processBarEnd">00:00</p>
            </div>
            <div class="audioPlayerButton">
                <i id="audioPlayerModel">&#xe658;</i>
                <i id="audioPrev">&#xe78a;</i>
                <i id="audioPaste">&#xea82;</i>
                <i id="audioNext">&#xe7a5;</i>
                <i id="audioPlayerList">&#xe620;</i>
            </div>
        </div>
        <!-- 播放列表 -->
        <div class="musicPlayerListOuter" style="opacity: 0; bottom: -99rem">
            <div id="musicPlayerListTitle">
                当前播放
                <i style="
                    font-size: 1.1rem;
                    color: rgba(255, 255, 255, 0.8);
                    margin-left: 0.3rem;"
                   id="playListCount"
                >(167)</i>
            </div>
            <ul class="musicPlayerList"></ul>
        </div>
    </div>

    <!--mini播放器-->
    <div class="miniPlayer" style="display: none">
        <div id="miniPlayerBackgroundImage"></div>
        <span id="miniPlayerLeft">
            <img src="./assets/img/musicPlaylist/toby.jpg"/>
            <p id="miniPlayerSongName">深海</p>
            <p id="miniPlayerSongAuthor">华北浪革</p>
        </span>
        <span id="miniPlayerRight">
            <i id="miniPlayerPrev">&#xe78a;</i>
            <i id="audioControlMini">&#xea82;</i>
            <i id="miniPlayerNext">&#xe7a5;</i>
        </span>
    </div>

    <!--底部栏-->
    <div class="bottomTab">
        <ul>
            <!--探索-->
            <li>
                <a href="#explore">
                    <img src="./assets/img/bottomTab/发现.png" alt="">
                    <p>发现</p>
                </a>
            </li>
            <!--博客-->
            <li>
                <a href="#blog">
                    <img src="./assets/img/bottomTab/博客.png" alt="">
                    <p>博客</p>
                </a>
            </li>
<!--            个人空间-->
            <li>
                <a href="#userSpace">
                    <img src="./assets/img/bottomTab/我的.png" alt="">
                    <p>我的</p>
                </a>
            </li>
<!--            关注-->
            <li>
                <a href="#subscribe">
                    <img src="./assets/img/bottomTab/关注.png" alt="">
                    <p>关注</p>
                </a>
            </li>
<!--            社区-->
            <li>
                <a href="#community">
                    <img src="./assets/img/bottomTab/社区.png" alt="">
                    <p>社区</p>
                </a>
            </li>
        </ul>
    </div>
</body>
    <!-- 音乐播放 -->
    <audio src="" id="musicPlayerSetting"></audio>
    <!-- 音效 -->
    <audio src="" id="soundEffect" autoplay></audio>
    <!--工具类-->
    <script src="./utils/carousel.js"></script>
    <script src="./utils/router.js"></script>
    <script src="./utils/animation.js"></script>
    <script src="./utils/request.js"></script>
    <script src="./utils/musicPlayerUtils.js"></script>
    <script src="./utils/musicPlaylistLoader.js"></script>
    <script src="./utils/lyricFormat.js"></script>
    <script src="./utils/debounceThrottle.js"></script>
    <script src="./utils/layLoad.js"></script>
    <script src="./utils/http_cdn.staticfile.org_moment.js_2.24.0_moment.js"></script>
    <!--页面的js-->
    <script src="./js/explore.js"></script>
    <script src="./js/bottomIndex.js"></script>
    <script src="./js/userSpace.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/musicPlaylist.js"></script>
    <script src="./js/search.js"></script>
</html>